<template>

   <!-- 职位列表 -->
      <div class="position-list" v-on:click="delet">
          <!-- 每一条职位信息 -->
          <div class="position-item">
              <p>
                  <span>{{ptitle}}</span>
                  <span>8k-10k</span>
                  <span>编辑</span>
              </p>
              <div>
                  <p>
                      <span>成都</span>
                      <span class="fenge01"></span>
                      <span>经验1-3年</span>
                      <span class="fenge01"></span>
                      <span>大专及以上</span>
                      <span class="fenge01"></span>
                      <span>全职</span>
                  </p>
                  <p>删除</p>
              </div>
              <div>
                  <p>
                    <svg class="icon price-bottom-01" aria-hidden="true">
                        <use xlink:href="#icon-chakan"></use>
                    </svg>
                    <span>105人查看></span>
                  </p>
                  <p>
                      <span>2017-11-06</span>
                      <span>发布</span>
                  </p>
              </div>

             


          </div>
          <!-- 每一条职位信息 -->
          <div class="position-item">
              <p>
                  <span>{{ptitle}}</span>
                  <span>8k-10k</span>
                  <span>编辑</span>
              </p>
              <div>
                  <p>
                      <span>成都</span>
                      <span class="fenge01"></span>
                      <span>经验1-3年</span>
                      <span class="fenge01"></span>
                      <span>大专及以上</span>
                      <span class="fenge01"></span>
                      <span>全职</span>
                  </p>
                  <p>删除</p>
              </div>
              <div>
                  <p>
                    <svg class="icon price-bottom-01" aria-hidden="true">
                        <use xlink:href="#icon-chakan"></use>
                    </svg>
                    <span>105人查看></span>
                  </p>
                  <p>
                      <span>2017-11-06</span>
                      <span>发布</span>
                  </p>
              </div>

             


          </div>
          <!-- 每一条职位信息 -->
          <div class="position-item">
              <p>
                  <span>{{ptitle}}</span>
                  <span>8k-10k</span>
                  <span>编辑</span>
              </p>
              <div>
                  <p>
                      <span>成都</span>
                      <span class="fenge01"></span>
                      <span>经验1-3年</span>
                      <span class="fenge01"></span>
                      <span>大专及以上</span>
                      <span class="fenge01"></span>
                      <span>全职</span>
                  </p>
                  <p>删除</p>
              </div>
              <div>
                  <p>
                    <svg class="icon price-bottom-01" aria-hidden="true">
                        <use xlink:href="#icon-chakan"></use>
                    </svg>
                    <span>105人查看></span>
                  </p>
                  <p>
                      <span>2017-11-06</span>
                      <span>发布</span>
                  </p>
              </div>

             


          </div>
          <!-- 每一条职位信息 -->
          <div class="position-item">
              <p>
                  <span>{{ptitle}}</span>
                  <span>8k-10k</span>
                  <span>编辑</span>
              </p>
              <div>
                  <p>
                      <span>成都</span>
                      <span class="fenge01"></span>
                      <span>经验1-3年</span>
                      <span class="fenge01"></span>
                      <span>大专及以上</span>
                      <span class="fenge01"></span>
                      <span>全职</span>
                  </p>
                  <p>删除</p>
              </div>
              <div>
                  <p>
                    <svg class="icon price-bottom-01" aria-hidden="true">
                        <use xlink:href="#icon-chakan"></use>
                    </svg>
                    <span>105人查看></span>
                  </p>
                  <p>
                      <span>2017-11-06</span>
                      <span>发布</span>
                  </p>
              </div>

             


          </div>
      </div> 
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  props: {
    ptitle: String
  },
  methods: {
    // 对列表信息进行删除
    delet(e) {
      if (e.target.innerHTML == "删除") {
        MessageBox({
          title: "提示",
          message: "确定删除该项?",
          showCancelButton: true
        });
        MessageBox.confirm("确定删除该项?").then(action => {
          $(e.target)
            .parents(".position-item")
            .remove();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// 职位列表
.position-list {
  // 每条职位信息
  .position-item {
    padding: 23px 12px;
    border-bottom: 10px solid #f4f4f4;

    > :first-child {
      margin-bottom: 14.3px;
      overflow: hidden;
      > span {
        display: block;
      }
      > :first-child {
        float: left;
        font-size: 16px;
        color: #282828;
        margin-right: 24px;
      }
      > :nth-child(2) {
        float: left;
        font-size: 16px;
        color: #fd4f00;
        margin-top: 1.5px;
      }
      > :nth-child(3) {
        float: right;
        font-size: 14px;
        color: #3887fe;
        margin-top: 1.5px;
      }
    }
    > :nth-child(2) {
      font-size: 12px;
      overflow: hidden;

      > :first-child {
        float: left;
        color: #666666;
        display: flex;
        align-items: center;
        > span {
          display: block;
          float: left;
          margin-right: 10px;
        }
        > .fenge01 {
          display: block;
          float: left;
          width: 1px;
          height: 12px;
          background: #666666;
        }
      }
      > :last-child {
        float: right;
        font-size: 14px;
        color: #3887fe;
      }
    }
    > :nth-child(3) {
      margin-top: 14.3px;
      color: #999999;
      overflow: hidden;
      > :first-child {
        float: left;
        > span {
          float: left;
          display: block;
        }
        > .icon {
          display: block;
          float: left;
          margin-top: 3px;
          margin-right: 7px;
        }
      }
      > :nth-child(2) {
        float: right;
      }
    }
  }
}
</style>
